<template>
  <div class="examInfoView">
    <div class="flex_start" style="align-items: center">
      <img v-if="timeCount>0" class="clockImg" src="/web-hft-ee/static/img/m/clock.png" />
      <p v-if="timeCount>0" class="timeLabel">{{timeStr}}</p>
    </div>
    <div class="flex_start" style="align-items: center">
      <img class="tipCardImg" src="/web-hft-ee/static/img/m/tipcard.png" @click="tipCardClick" />
      <div v-if="examType != 6" class="submitBtn" @click="submitClick">交卷</div>
    </div>

  </div>
</template>

<script>
  import {Dialog} from 'vant'

  Vue.use(Dialog)

  export default {
    name: 'ExamInfoViewM',
    props: ['timeCount', 'examType'],
    data() {
      return {

      }
    },
    computed: {
      timeStr() {
        let hour = Math.floor(this.timeCount / 3600)
        let min = Math.floor((this.timeCount % 3600) / 60)
        let sec = this.timeCount % 60

        let timeStr = (hour > 9 ? hour : ("0" + hour)) + ':' + (min > 9 ? min : ("0" + min)) + ':' + (sec > 9 ? sec : ("0" + sec))
        return timeStr

      }
    },
    methods: {
      tipCardClick() {
        this.$emit('sendTipCardClick')
      },
      submitClick() {

        Dialog.confirm({
          title: '确认交卷',
          message: '确认交卷？交卷后则考试结束',
        })
          .then(() => {
            this.$emit('sendSubmitClick')
          })
          .catch(() => {

          })
      }
    }
  }
</script>

<style scoped>
  .examInfoView {
    background-color: white;
    position: sticky;
    top: 0px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    border-bottom: #E7E7E7 1px solid;
  }
  .clockImg {
    width: 20px;
    height: 20px;
  }
  .timeLabel {
    margin-left: 8px;
    font-size: 16px;
    color: red;
  }
  .tipCardImg {
    width: 22px;
    height: 22px;
  }
  .submitBtn {
    margin-left: 22px;
    padding: 3px 12px;
    background-color: #1DA1F2;
    color: white;
    font-size: 14px;
    border-radius: 6px;
  }
</style>
